<template>
  <div>
    <el-container>
      <el-header
        style="background-color: #545c64; display: flex; align-items: center"
      >
        <img src="@/assets/img/logo.png" alt="" style="height: 135%" />
      </el-header>
      <el-container>
        <el-aside width="200px" style="height: 100vh">
          <el-menu
            :default-active="active"
            router
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#409eff"
            @select="handleSelect"
          >
            <el-menu-item index="adminUser">
              <i class="el-icon-user-solid"></i>
              <span slot="title">客人管理</span>
            </el-menu-item>
            <el-menu-item index="adminOrder">
              <i class="el-icon-s-order"></i>
              <span slot="title">订单管理</span>
            </el-menu-item>
            <el-menu-item index="adminNotice">
              <i class="el-icon-message-solid"></i>
              <span slot="title">公告管理</span>
            </el-menu-item>
            <el-submenu index="adminMenu">
              <template slot="title">
                <i class="el-icon-s-shop"></i> <span>菜单管理</span></template
              >

              <el-menu-item-group>
                <el-menu-item index="adminClassify">
                  <i class="el-icon-menu"></i>
                  <span>分类管理</span></el-menu-item
                >
                <el-menu-item index="adminFood">
                  <i class="el-icon-tableware"></i>
                  <span>菜品管理 </span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main style="width: calc(100vw - 200px); height: calc(100vh - 60px)">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ activeName }}</el-breadcrumb-item>
          </el-breadcrumb>
          <el-card><router-view></router-view> </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "",
      selectMenu: "",
    };
  },
  computed: {
    activeName() {
      if (this.selectMenu == "adminUser") return "客人管理";
      else if (this.selectMenu == "adminOrder") return "订单管理";
      else if (this.selectMenu == "adminNotice") return "通知管理";
      else if (this.selectMenu == "adminClassify") return "分类管理";
      else if (this.selectMenu == "adminFood") return "菜品管理";
    },
  },
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "overflow:hidden;");
    document.querySelector("html").setAttribute("style", "overflow:hidden;");
  },
  created() {
    let path = this.$route.path;

    this.active = path.split("/")[1];
    this.selectMenu = this.active;
  },
  methods: {
    handleSelect(val) {
      this.selectMenu = val;
    },
  },
};
</script>

<style lang="less" scoped>
// /deep/ .el-menu {
//   height: 100% !important;
// }
.el-aside {
  background-color: #545c64;
}
.el-card {
  margin-top: 20px;
  /deep/ .el-card__body {
    padding: 20px;
    height: calc(100vh - 177px);
  }
}
</style>